<template>
  <div class="system-configuration">
    <el-tabs @tab-click="topHandleClick" class="system-configuration-tabs">
      <el-tab-pane label="配置管理"></el-tab-pane>
      <el-tab-pane label="邮箱配置"></el-tab-pane>
      <el-tab-pane label="流程按钮配置"></el-tab-pane>
      <el-tab-pane label="用户等级"></el-tab-pane>
      <el-tab-pane label="安全配置"></el-tab-pane>
    </el-tabs>
    <el-card shadow="hover" class="system-configuration-container">
      <el-tabs @tab-click="leftHandleClick" tab-position="left" class="system-configuration-leftTab">
        <el-tab-pane label="全部"></el-tab-pane>
        <el-tab-pane label="流程"></el-tab-pane>
        <el-tab-pane label="文档"></el-tab-pane>
        <el-tab-pane label="界面"></el-tab-pane>
        <el-tab-pane label="人事"></el-tab-pane>
        <el-tab-pane label="计划"></el-tab-pane>
        <el-tab-pane label="手机端"></el-tab-pane>
        <el-tab-pane label="系统"></el-tab-pane>
        <el-tab-pane label="智能模块"></el-tab-pane>
        <el-tab-pane label="其他"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableData.data" stripe class="system-configuration-table" :show-header='false' border>
        <el-table-column prop="num" label="ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="select" show-overflow-tooltip width="200">
          <template #default="scope">
            <el-select v-model="scope.row.value" placeholder="请选择">
              <el-option v-for="item in scope.row.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="path" width="150">
          <template #default="scope">
            <el-button size="mini" plain>修改</el-button>
            <el-button size="mini" plain @click="onRowDel(scope.row)">隐藏</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue';
export default {
  name: 'systemUser',
  setup() {
    const state = reactive({
      tableData: {
        data: [
          {
            kind: '流程',
            num: '经典版默认皮肤',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
          {
            num: '上午上班时间(小时与分钟必须为两位，不足两位需在前面加0 ,用于初始化工作日历)',
            options: [
              {
                value: '选项1',
                label: '黄金糕',
              },
              {
                value: '选项2',
                label: '双皮奶',
              },
              {
                value: '选项3',
                label: '蚵仔煎',
              },
              {
                value: '选项4',
                label: '龙须面',
              },
              {
                value: '选项5',
                label: '北京烤鸭',
              },
            ],
            value: '',
          },
        ],
        loading: false,
      },
      topTab: '',
      leftTab: '',
    });
    // 当前行删除
    const onRowDel = (row) => {
      console.log(row);
    };
    // 分页改变
    const onHandleSizeChange = (val) => {
      state.tableData.param.pageSize = val;
    };
    // 分页改变
    const onHandleCurrentChange = (val) => {
      state.tableData.param.pageNum = val;
    };
    // 页面加载时
    onMounted(() => {
    });
    return {
      onRowDel,
      onHandleSizeChange,
      onHandleCurrentChange,
      ...toRefs(state),
    };
  },
  methods: {
    topHandleClick(tab) {
      this.tableData.data.map(item => {
        item.num = tab.props.label
      })
    },
    leftHandleClick(tab, event) {
      this.tableData.data.map(item => {
        item.num = tab.props.label
      })
    },
  },
};
</script>

<style scoped lang="scss">
.system-configuration-container {
	.system-configuration-leftTab {
		width: 200px;
		float: left;
	}
	.system-configuration-table {
		width: calc(100% - 300px);
	}
}
</style>
